<template>
  <div class="config-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <el-icon class="title-icon"><Setting /></el-icon>
          系统配置管理
        </h1>
        <p class="page-description">配置系统运行参数，修改后点击提交保存</p>
      </div>
    </div>

    <!-- 配置表单区域 -->
    <div class="config-section">
      <div class="section-header">
        <h2 class="section-title">配置参数</h2>
        <div class="section-divider"></div>
      </div>
      
      <el-form label-width="200px" class="config-form">
        <div class="config-grid">
          <div 
            v-for="item in confList"
            :key="item.configKey"
            class="config-card"
            :class="{ 'modified': item.isModified }"
          >
            <div class="config-card-header">
              <label class="config-label">{{ item.configDesc }}</label>
              <el-tag v-if="item.isModified" type="warning" size="small" effect="light">
                已修改
              </el-tag>
            </div>
            
            <div class="config-input-wrapper">
              <el-input-number
                v-model="item.configValue"
                :min="0"
                :precision="2"
                controls-position="right"
                class="config-input"
                @change="touch(item)"
              />
              <span class="config-unit">{{ item.unit || '个' }}</span>
            </div>
            
            <div class="config-key">
              <el-icon class="key-icon"><Key /></el-icon>
              {{ item.configKey }}
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 提交按钮区域 -->
    <div class="submit-section">
      <div class="submit-wrapper">
        <el-button 
          type="primary" 
          size="large" 
          @click="submitForm"
          :loading="submitting"
          class="submit-btn"
        >
          <el-icon><Check /></el-icon>
          {{ submitting ? '保存中...' : '保存配置' }}
        </el-button>
        <el-button 
          size="large" 
          @click="resetForm"
          class="reset-btn"
        >
          <el-icon><RefreshLeft /></el-icon>
          重置
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="Conf">
import { ref, getCurrentInstance, onMounted } from 'vue'
import { listConf, getConf, addConf, updateConf } from "@/api/order/conf"
import { Setting, Key, Check, RefreshLeft } from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance()

const confList = ref([])
const originalConfList = ref([]) // 保存原始数据用于重置
const submitting = ref(false)

/** 查询系统配置列表 */
function getList() {
  listConf({ pageSize: 9999 }).then(response => {
    const processedData = response.rows.map(item => ({
      ...item,
      configValue: parseFloat(item.configValue) || 0,
      isModified: false // 添加修改标记
    }))
    
    confList.value = processedData
    // 深拷贝保存原始数据
    originalConfList.value = JSON.parse(JSON.stringify(processedData))
  }).catch(error => {
    proxy.$modal.msgError("配置数据加载失败")
    console.error('加载失败:', error)
  })
}

/** 标记配置项已修改 */
function touch(item) {
  // 查找原始值进行比较
  const originalItem = originalConfList.value.find(orig => orig.configKey === item.configKey)
  item.isModified = originalItem && originalItem.configValue !== item.configValue
  
  console.log('配置项已修改:', item.configKey, item.configValue, '是否修改:', item.isModified)
}

/** 重置表单 */
function resetForm() {
  proxy.$modal.confirm('确认要重置所有配置到初始值吗？').then(() => {
    confList.value = JSON.parse(JSON.stringify(originalConfList.value))
    proxy.$modal.msgSuccess("配置已重置")
  }).catch(() => {})
}

/** 提交按钮 */
function submitForm() {
  // 检查是否有修改
  const hasModified = confList.value.some(item => item.isModified)
  if (!hasModified) {
    proxy.$modal.msgWarning("没有配置项被修改")
    return
  }

  submitting.value = true
  
  const updatePromises = confList.value
    .filter(item => item.isModified) // 只更新修改过的配置
    .map(item => {
      return updateConf({
        id: item.id,
        configKey: item.configKey,
        configValue: item.configValue.toString(),
        configDesc: item.configDesc,
        groupName: item.groupName,
        env: item.env,
        isEnabled: item.isEnabled
      })
    })

  Promise.all(updatePromises).then(() => {
    proxy.$modal.msgSuccess("配置更新成功")
    getList() // 重新加载数据
  }).catch(error => {
    proxy.$modal.msgError("配置更新失败")
    console.error('更新失败:', error)
  }).finally(() => {
    submitting.value = false
  })
}

// 页面初始化
onMounted(() => {
  getList()
})
</script>

<style scoped>
.config-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 页面头部样式 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.header-content {
  text-align: center;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.title-icon {
  font-size: 32px;
}

.page-description {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

/* 配置区域样式 */
.config-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.section-header {
  margin-bottom: 30px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 15px 0;
}

.section-divider {
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
  width: 60px;
}

/* 配置网格布局 */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
}

/* 配置卡片样式 */
.config-card {
  background: #fafbfc;
  border: 2px solid #e4e7ed;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.config-card:hover {
  border-color: #667eea;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.config-card.modified {
  border-color: #e6a23c;
  background: #fdf6ec;
}

.config-card.modified::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #e6a23c 0%, #f56c6c 100%);
}

.config-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.config-label {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.config-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.config-input {
  flex: 1;
}

.config-unit {
  color: #909399;
  font-size: 14px;
  font-weight: 500;
  min-width: 30px;
  text-align: center;
  background: #f0f2f5;
  padding: 4px 8px;
  border-radius: 6px;
}

.config-key {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #909399;
  background: #f0f2f5;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
}

.key-icon {
  font-size: 14px;
}

/* 提交区域样式 */
.submit-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.submit-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto;
}

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  flex: 1;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.reset-btn {
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid #dcdfe6;
  color: #606266;
  transition: all 0.3s ease;
  flex: 1;
}

.reset-btn:hover {
  border-color: #c0c4cc;
  color: #409eff;
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .config-container {
    padding: 15px;
  }
  
  .page-header {
    padding: 20px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .config-section {
    padding: 20px;
  }
  
  .config-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .submit-wrapper {
    flex-direction: column;
    gap: 12px;
  }
}

/* Element Plus 组件样式覆盖 */
:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__inner) {
  text-align: left;
  font-weight: 600;
  font-size: 16px;
}

:deep(.el-tag) {
  font-weight: 500;
}

/* 动画效果 */
.config-card {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 加载状态样式 */
.submit-btn:loading {
  background: linear-gradient(135deg, #a0a0a0 0%, #808080 100%);
}
</style>
